<script>
// 存储 vue 页面逻辑 js 代码
import {ref} from 'vue'
export default {
  setup() {
    // 定义一些要展示到 HTML 上的一些数据 变量 / 对象
    let counter = ref(1); // 相当于 {value:1}
    // 让 counter 自增的方法
    function counterIncr(){
      counter.value++
    }
    // 让 counter 自减的方法
    function counterDecr() {
      counter.value--
    }
    // 显示 counter 值的方法
    function showCounter() {
      alert(counter.value)
    }
    return {
      counter,
      counterIncr,
      counterDecr,
      showCounter,
    };
  },
};
</script>

<!-- 页面的样式的 html 代码 -->
<template>
  <div>
    <button @click="counterIncr()">+</button>
    <span v-text="counter"></span>
    <button @click="counterDecr()">-</button>
    <button @click="showCounter()">showCounter</button>
  </div>
</template>

<style scoped>
/* 存储的是 css 代码。 scoped 的意思是 Vue.js 单文件组件中用于设置组件样式的一种方式
  它的含义是将样式局限在当前组件中，不对全局样式造成影响
*/
</style>
